<template>
	<div class="contact-container">
        <div class="custom-navbar">
            <div class="nav-left">
            </div>
            <div class="nav-title">联系人</div>
            <div class="nav-right">
                <span style="color: #26B1A1;font-size: 14px" @click="addFriend">添加好友</span>
            </div>
        </div>

		<!-- 搜索区域 -->
		<div class="search-section">
			<van-search
				v-model="searchKeyword"
				class="custom-search"
				placeholder="搜索"
				background="#ffffff"
				:round="true"
				:show-action="false"
			>
				<template #left-icon>
					<van-icon name="search" size="18" style="padding-left: 5px;padding-right: 5px;" />
				</template>
			</van-search>
		</div>

		<!-- 联系人列表 -->
		<div class="contact-list">
			<div class="section-header" @click="openNewFriend()">
				<van-icon name="plus" size="16px" style="margin-right: 5px;" />
				新的好友
			</div>
			<!-- 群聊列表 -->
			<div class="section-header">
				<van-icon name="friends-o" size="16px" style="margin-right: 5px;" />
				群聊
			</div>
			<div
				v-for="group in filteredGroups"
				:key="group.id"
				class="contact-item"
				@click="openChat(group)"
			>
				<div class="avatar">
					<img :src="group.avatar" alt="" >
				</div>
				<div class="name">{{ group.displayName }}</div>
			</div>

			<!-- 联系人列表 -->
			<div class="section-header">
				<van-icon name="contact-o" size="16px" style="margin-right: 5px;" />
				联系人
			</div>
			<div
				v-for="contact in filteredContacts"
				:key="contact.id"
				class="contact-item"
				@click="openChat(contact)"
			>
				<div class="avatar">
					<img :src="contact.avatar" alt="" >
				</div>
				<div class="name">{{ contact.displayName }}</div>
			</div>
		</div>
		<!-- 操作面板 -->
		<transition name="fade">
			<div class="overlay-mask" v-if="showActionPanel" @click="showActionPanel = false"></div>
		</transition>

		<div class="action-panel" v-if="showActionPanel" :style="actionPanelStyle">
			<div class="action-item" @click="createGroup">
				<van-icon name="friends-o" />
				<span>发起群聊</span>
			</div>
			<div class="action-divider"></div>
<!-- 			<div class="action-item" @click="addFriend">
				<van-icon name="add-o" />
				<span>添加朋友</span>
			</div>
			<div class="action-divider"></div>
			<div class="action-item" @click="scanQRCode">
				<van-icon name="scan" />
				<span>扫一扫</span>
			</div> -->
		</div>
	</div>
</template>

<script>
	import { postAction, getFileAccessHttpUrl } from '@/api'

	export default {
		name: "contacts",
		data() {
			return {
				searchKeyword: "",
				groups: [],
				contacts: [],
				userId: this.$store.getters.userid,
				showActionPanel: false,
				actionPanelStyle: {
					top: '50px',
					right: '10px'
				}
			}
		},
		computed: {
			// 过滤后的群聊列表
			filteredGroups() {
				if (!this.searchKeyword) return this.groups;
				return this.groups.filter(group =>
					group.displayName.toLowerCase().includes(this.searchKeyword.toLowerCase())
				);
			},
			// 过滤后的联系人列表
			filteredContacts() {
				if (!this.searchKeyword) return this.contacts;
				return this.contacts.filter(contact =>
					contact.displayName.toLowerCase().includes(this.searchKeyword.toLowerCase())
				);
			}
		},
		created() {
			this.initContactsList();
		},
		methods: {
			// backRoute() {
			// 	this.$router.push({ name: 'main' })
			// },
			toggleActionPanel() {
				this.showActionPanel = !this.showActionPanel;

				if (this.showActionPanel) {
					// 获取图标位置，动态设置弹框位置
					const iconRect = this.$refs.addIcon.$el.getBoundingClientRect();
					this.actionPanelStyle = {
						top: `${iconRect.bottom + 5}px`,
						right: `${window.innerWidth - iconRect.right}px`
					};
				}
			},
			createGroup() {
				this.$router.push('/coordination/createGroup')
			},
			addFriend() {
				this.showActionPanel = false;
        this.$router.push({name: 'addfriend'})
			},
			scanQRCode() {
				this.showActionPanel = false;
				console.log("扫一扫");
				this.$toast({
					message: '扫一扫功能',
					position: 'bottom'
				});
			},

			// 初始化群聊列表
			initGroupsList() {
				postAction('/sys/chat/relative', {
					userId: this.userId
				}).then((res) => {
					if (res.success) {
						this.processGroups(res.result);
					} else {
						console.error('加载群聊失败:', res.message);
					}
				}).catch((err) => {
					console.error('加载群聊异常:', err);
				});
			},

			// 处理群聊数据
			processGroups(list) {
				list.forEach((group) => {
          alert(group.avatar)
					group.avatar = group.avatar
						? getFileAccessHttpUrl(group.avatar)
						: '/static/mobile/img/common/user_default.webp';
				});
				this.groups = list;
			},

			// 初始化联系人列表
			initContactsList() {
				postAction('/sys/chat/relative', {
					userId: this.userId
				}).then((res) => {
					if (res.success) {
						this.processContacts(res.result);
					} else {
						console.error('加载联系人失败:', res.message);
					}
				}).catch((err) => {
					console.error('加载联系人异常:', err);
				});
			},

			// 处理联系人数据
			processContacts(list) {
				list.forEach((contact) => {
					contact.avatar = contact.avatar
						? getFileAccessHttpUrl(contact.avatar)
						:  '/static/mobile/img/common/user_default.webp';
					if(contact.is_group == 1){
						this.groups.push(contact)
					}else{
						this.contacts.push(contact)
					}
				});
			},

			// 打开群聊
			openChat(contact) {
				this.$router.push(`/coordination/chat/${contact.goalId}`)
			},
			openNewFriend() {
				this.$router.push({name: 'newFriend'})
			},


		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body {
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
		color: #333;
	}

	.contact-container {
		margin: 0 auto;
		height: 95vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.navbar {
		background-color: #fff;
		box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	}

	/* 搜索区域 */
	.search-section {
		padding: 15px 16px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}

	.custom-search {
		--van-search-border-radius: 18px;
		--van-search-bar-height: 40px;
		--van-search-input-padding: 0 10px;
		--van-search-border-color: #f0f0f0;
		--van-search-background: #f7f8fa;
	}

	/* 联系人列表 */
	.contact-list {
		flex: 1;
		overflow-y: auto;
		padding: 0 16px;
		background-color: #fff;
	}

	.section-header {
		padding: 15px 0 8px;
		font-size: 16px;
		font-weight: bold;
		color: #26B1A1;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 8px;
	}

	.contact-item {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f8f8f8;
		cursor: pointer;
		transition: background-color 0.2s;
	}

	.contact-item:last-child {
		border-bottom: none;
	}

	.contact-item:hover {
		background-color: #f9f9f9;
	}

	.avatar {
		width: 44px;
		height: 44px;
		border-radius: 20%;
		overflow: hidden;
		margin-right: 18px;
	}

	.avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.name {
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}

	/* 空状态提示 */
	.empty-tip {
		text-align: center;
		padding: 30px 0;
		color: #999;
		font-size: 14px;
	}


	/* 自定义导航栏 */
	.custom-navbar {
		position: relative;
		height: 46px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
		z-index: 100;
	}

	.nav-left, .nav-right {
		display: flex;
		align-items: center;
		width: 60px;
	}

	.nav-right {
		justify-content: flex-end;
	}

	.nav-title {
		font-size: 16px;
		font-weight: bold;
		color: #26B1A1;
	}

	.nav-icon {
		font-size: 16px;
		color: #26B1A1;
		padding: 8px;
		border-radius: 50%;
		transition: background-color 0.2s;
	}

	.nav-icon:active {
		background-color: #f0f0f0;
	}

	/* 自定义弹出菜单 */
	.action-panel {
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
		overflow: hidden;
		width: 160px;
		position: absolute;
		z-index: 2000;
		transform-origin: top right;
		animation: scaleIn 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.action-item {
		padding: 16px 20px;
		font-size: 16px;
		color: #26B1A1;
		display: flex;
		align-items: center;
		transition: background-color 0.2s;
	}

	.action-item:active {
		background-color: #f9f9f9;
	}

	.action-item .van-icon {
		margin-right: 12px;
		font-size: 18px;
	}

	.action-divider {
		height: 1px;
		background-color: #f0f0f0;
	}

	/* 遮罩层 */
	.overlay-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: transparent;
		z-index: 1000;
	}

	/* 动画 */
	@keyframes scaleIn {
		0% {
			opacity: 0;
			transform: scale(0.8) translateY(-10px);
		}
		100% {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

	.fade-enter-active, .fade-leave-active {
		transition: opacity 0.2s;
	}

	.fade-enter, .fade-leave-to {
		opacity: 0;
	}

</style>
